<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style> 
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
        font-size: calc(100vw / 1960);
    }
    .actionBar {
        position: fixed;
        top: 100rem;
        right: 100rem;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
        width: 333rem;
        border-radius: 5rem;
        background-color: rgba(123, 123, 123, .2);
    }
    .actionBar div {
        margin: 22rem;
        width: 111rem;
        height: 55rem;
        background-color: #888;
        border-radius: 7rem;
        font-size: 22rem;
        text-align: center;
        line-height: 55rem;
        color: #fff;
        cursor: pointer;
    }
    .attention {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(111, 111, 111, .2);
        display: none;
        z-index: 99999;
    }
    .attentionBox {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 100rem;
        width: 800rem;
        height: 500rem;
        transform: translate(-50%, -50%);
        background-color: white;
    }
    .attentionBox .title {
        width: 100%;
        text-align: center;
        font-size: 50rem;
    }
    .attentionBox .chooses {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: 100rem;
        margin-top: 130rem;
    }
    .attentionBox .chooses div {
        font-size: 33rem;
        font-weight: 700;
        cursor: pointer;
    }
    .attentionBox .chooses .cancel {
        color: #777;
    }
</style>

<body>
    <div class="actionBar">
        <div class="remoking">撤销&nbsp;(Q)</div>
        <div class="forwarding">前进&nbsp;(W)</div>
        <div class="righting">回正&nbsp;(E)</div>
        <div class="restoring">复原&nbsp;(R)</div>
    </div>
    <div class="attention">
        <div class="attentionBox">
            <div class="title">您确认要复原魔方吗？</div>
            <div class="chooses">
                <div class="confirm">确认</div>
                <div class="cancel">取消(10)</div>
            </div>
        </div>
    </div>
</body>

<script src="./create.js"></script>

</html>